import { useNavigate } from 'react-router-dom'
import CheckList from '@/library/gallery/components/CheckList'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const DemoUIHome: React.FC<unknown> = () => {
  const navigate = useNavigate()
  return (
    <DemoBlock title="组件分发">
      <CheckList isLink>
        <CheckList.Item onClick={() => navigate('./space')}>Space Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./button')}>Button Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./badge')}>Badge Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./image')}>Image Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./list')}>List Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./checkList')}>Checklist Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./switch')}>Switch Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./checkBox')}>CheckBox Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./radio')}>Radio Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./input')}>Input Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./divider')}>Divider Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./timeline')}>Timeline Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./mask')}>Mask Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./popup')}>Popup Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./centerPopup')}>CenterPopup Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./dialog')}>Dialog Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./dialogShow')}>DialogShow Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./dialogAlert')}>DialogAlert Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./dialogConfirm')}>DialogConfirm Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./toast')}>Toast Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./toastMethod')}>ToastMethod Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./spinLoading')}>SpinLoading Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./dotLoading')}>DotLoading Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./ellipsis')}>Ellipsis Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./skeleton')}>Skeleton Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./waterMark')}>WaterMark Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./waterMark1')}>WaterMark1 Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./tabs')}>Tabs Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./tabs1')}>Tabs1 Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./indexBar')}>IndexBar Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./collapse')}>Collapse Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./noticeBar')}>NoticeBar Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./pickerView')}>PickerView Comp</CheckList.Item>
        <CheckList.Item onClick={() => navigate('./cascadePickerView')}>CascadePickerView Comp</CheckList.Item>
      </CheckList>
    </DemoBlock>
  )
}

export default DemoUIHome
